{#-
 # Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 #
 # Licensed under the Apache License, Version 2.0 (the "License").
 # You may not use this file except in compliance with the License.
 # A copy of the License is located at
 #
 #     http://www.apache.org/licenses/LICENSE-2.0
 #
 # or in the "license" file accompanying this file. This file is
 # distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF
 # ANY KIND, either express or implied. See the License for the specific
 # language governing permissions and limitations under the License.
-#}
 <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>
    Outcome table
  </title>
<style>
#title{
  background-color: #ec407a;
  color: white;
  padding: 2em;
}
h1 {
  margin-bottom: 0em;
}
#subtitle {
  font-variant: small-caps;
  text-transform: lowercase;
  letter-spacing: 0.2em;
}
#content {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 2em;
  padding-bottom: 2em;
  color: #263238;
  font-family: Helvetica, sans-serif;
}
p {
  margin: 0;
}
#outcome-table {
  margin-top: 4em;
  display: grid;
  grid-template-columns: 6em 4em auto;
  align-items: center;
}

.comment {
  padding: 0.5em;
}

.action {
  height: 3em;
  width: 3em;
  border-radius: 5px;
  border: 1px solid #4b636e;
  margin: 0.5em;
}

.fail_ignored {
  background-color: #ff9800;
}

.fail {
  background-color: #f44336;
}

.success {
  background-color: #3f51b5;
}

.outcome {
  justify-self: center;
}
.small-large,  .half-split{
  justify-self: center;
  display: flow;
  flex-direction: column;
  text-align: center;
}
.small-large .top {
  text-transform: lowercase;
  font-variant: small-caps;
  font-size: small;
  margin-bottom: 0.2em;
  margin-top: 0.5em;
}
.small-large .bottom {
  font-size: xx-large;
}
.half-split .top {
  text-transform: lowercase;
  font-variant: small-caps;
  margin-bottom: 0.2em;
  margin-top: 0.5em;
}
.half-split .bottom {
  text-transform: lowercase;
  font-variant: small-caps;
}

@media (max-width: 640px){
  .pipeline-progress {
    width: 10em;
  }
  #build-title:after  { content: 'B'; visibility: visible; margin-left: -1.5em}
  #test-title:after   { content: 'T'; visibility: visible; margin-left: -2.5em}
  #report-title:after { content: 'R'; visibility: visible; margin-left: -3.5em}
  #build-title        { visibility: hidden; }
  #test-title         { visibility: hidden; }
  #report-title       { visibility: hidden; }
}
@media (prefers-color-scheme: dark){
  .status-icon-in-progress { fill: #ddd; }
  .status-icon-in-progress circle { stroke: #ddd; }

  .pipeline-header {
    color: #eceff1;
  }
  .pipeline-row {
    color: #eceff1;
    background-color: #37474f;
  }
  body {
    color: #babdbe;
    background-color: #263238;
  }
  p {
    color: #babdbe;
  }
  #subtitle {
    color: #fff;
  }
  .action {
    border: 1px solid #cfd8dc;
  }
  #table-comment {
    margin-top: 4em;
  }

}
</style>
</head>
<body>
<div id="content">

  <div id="title">
    <h1>
      Outcome Table
    </h1>
    <p id="subtitle">
      Litani CI Dashboard
    </p>
  </div><!-- id="title" -->

  {% if "comment" in table %}
  <p id="table-comment">
  {{ table["comment"] }}
  </p><!-- id="table-comment"-->
  {% endif %}{# "comment" in table #}

  <div id="outcome-table">

    {% for outcome in table["outcomes"] %}
    <div class="outcome">

      {% if outcome["type"] == "return-code" %}
      <div class="small-large">
        <div class="top">
          <p>return code</p>
        </div>
        <div class="bottom">
          <p>{{ outcome["value"] }}</p>
        </div>
      </div>

      {% elif outcome["type"] == "timeout" %}
      <div class="half-split">
        <div class="top">
          <p>time</p>
        </div>
        <div class="bottom">
          <p>out</p>
        </div>
      </div>

      {% elif outcome["type"] == "wildcard" %}
      <div class="half-split">
        <div class="top">
          <p>everything</p>
        </div>
        <div class="bottom">
          <p>else</p>
        </div>
      </div>
      {% endif %}{# outcome["type"] == "return-code" #}
    </div><!-- class="outcome" -->

    <div class="action {{ outcome["action"] }}">
    </div>

    <div class="comment">
      {% if "comment" in outcome %}
      <p>{{ outcome["comment"] }}</p>
      {% endif %}{# "comment" in outcome #}
    </div>

    {% endfor %}{# outcome in table["outcomes"] #}

  </div><!-- id="outcome-table" -->


</div><!-- id="content" -->
</body>
</html>
